<template>
  <Card class="sl-app-card" style="cursor: poniter; height: 100px; width: 200px; border-radius: 10px; padding: 0px">
    <div class="bg-sl-slGray border-b-sl-slBlue border-b-1px pl-20px">
      <div class="text-xl font-light">{{ titleInfo }}</div>
    </div>
    <div class="w-full flex cursor-pointer h-80px" @click="redirectToPage">
      <div class="flex justify-between items-center">
        <div class="text-4xl ml-10px font-normal w-60px h-60px rounded-30px justify-center flex align-middle">
          <div class="text-5xl">
            {{ cardInfo }}
          </div>
        </div>
      </div>
      <div class="w-full flex justify-center items-center">
        <DoubleRightOutlined :style="{ fontSize: '32px', color: '#303f9f' }" />
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import { getOnlineUsers, getPaidTenants, getSoldApps, getSubscribedApps } from '/@/api/homepage/homepage';
import { DoubleRightOutlined } from '@ant-design/icons-vue';
import { useGo } from '../../../../hooks/web/usePage';
import { SaaSPageEnum } from '../../../../enums/pageEnum';
import { isTenant } from '/@/hooks/globVar';
import { useMenuState } from '/@/layout/default/sider/menu/useLayoutMenu';

const props = defineProps({
  cardClass: String,
});

const cardInfo = ref();
const iconInfo = ref();
const titleInfo = ref();
const colorInfo = ref();
const redirectUrl = ref(SaaSPageEnum.PLATFORM_HOEMPAGE);
const { changeSelectedKeys } = useMenuState();

const go = useGo();
const redirectToPage = () => {
  if (isTenant()) {
    return;
  } else {
    changeSelectedKeys([redirectUrl.value]);
    go(redirectUrl.value);
  }
};

switch (props.cardClass) {
  case 'subscribedApps':
    getSubscribedApps().then((res) => {
      cardInfo.value = res;
    });
    colorInfo.value = '#04ef1b';
    titleInfo.value = '订阅应用数';
    iconInfo.value = 'majesticons:applications-add-line';
    redirectUrl.value = SaaSPageEnum.APP_AUTH_MGMT;
    break;
  case 'soldApps':
    getSoldApps().then((res) => {
      cardInfo.value = res;
    });
    colorInfo.value = '#04c2fc';
    titleInfo.value = '上架应用数';
    iconInfo.value = 'majesticons:applications-line';
    redirectUrl.value = SaaSPageEnum.APP_MGMT;
    break;
  case 'paidTenants':
    getPaidTenants().then((res) => {
      cardInfo.value = res;
    });
    colorInfo.value = '#7171B7';
    titleInfo.value = '付费用户数';
    iconInfo.value = 'ri:user-star-line';
    break;
  case 'onlineUsers':
    getOnlineUsers().then((res) => {
      cardInfo.value = res;
    });
    colorInfo.value = '#8703fa';
    titleInfo.value = '在线用户数';
    iconInfo.value = 'ri:user-follow-line';
}
</script>
